<template>
	<div style="width: 100%; height: 100%">
		<TinymceVue
			v-model="data.content"
			:disabled="readonly"
			class="myTinymceVue"
			:init="data.init"
		/>
	</div>
</template>
<script lang="ts" setup>
import {reactive,onMounted,watch,useAttrs} from 'vue'
import TinymceVue from '@tinymce/tinymce-vue';

const attrs = useAttrs()
const emit = defineEmits(['update:modelValue']);
const props = defineProps({
	modelValue: {
		// 绑定的值
		type: String,
		default: ''
	},
	readonly: {
		// 是否禁止编辑
		type: Boolean,
		default: false
	},
	plugins: {
		type: [String, Array],
		default:
			'table lists wordcount fullscreen advlist anchor autolink charmap directionality insertdatetime link image nonbreaking pagebreak preview save searchreplace table visualblocks visualchars'
		// [表格 列表 全屏]
	},
	toolbar: {
		type: [String, Array],
		default:
			'undo redo | fullscreen | formatselect alignleft aligncenter alignright alignjustify | link unlink | numlist bullist | link image  | fontselect fontsizeselect forecolor backcolor | bold italic underline strikethrough | indent outdent | superscript subscript | removeformat |'
	},
	height: {
		type: [Number, String],
		default: 400
	},
	width: {
		type: [Number, String],
		default: 800
	}
});
onMounted(() => {
	// 组件挂载到页面之后执行
	(window as any).tinymce.init({}); // 初始化富文本
});
const data = reactive({
	loading: false,
	content: props.modelValue,
	init: {
		language: 'zh_CN', // 语言
		height: props.height, // 编辑器高度
		width: props.width, // 编辑器高度
		branding: false, // 是否禁用“Powered by TinyMCE”
		menubar: attrs.menubar===undefined?true:attrs.menubar, // 顶部菜单栏显示
		image_dimensions: false, // 去除宽高属性
		plugins: props.plugins, // 插件
		toolbar: props.toolbar, // 工具栏
		toolbar_mode:'sliding',
		promotion: false, // 隐藏右上角Upgrade 按钮
		font_formats:
			'Arial=arial,helvetica,sans-serif; 宋体=SimSun; 微软雅黑=Microsoft Yahei; Impact=impact,chicago;', // 字体
		fontsize_formats: '11px 12px 14px 16px 18px 24px 36px 48px 64px 72px', // 文字大小
		// paste_convert_word_fake_lists: false, // 插入word文档需要该属性
		paste_data_images: false, // 图片是否可粘贴
		paste_webkit_styles: 'all', // 此选项允许您指定在WebKit中粘贴时要保留的样式
		paste_merge_formats: true, // 此选项启用粘贴插件的合并格式功能
		nonbreaking_force_tab: false, // 此选项允许您在用户按下键盘tab键时强制TinyMCE插入三个实体
		paste_auto_cleanup_on_paste: false,
		file_picker_types: 'file image', // 此选项允许您通过空格或逗号分隔的类型名称列表指定所需的文件选取器类型。目前有三种有效类型：文件、图像和媒体
		content_css: '/tinymce/skins/content/default/content.css',
		imagetools_toolbar: 'editimage', // 图片控制的工具栏
		content_style: 'img {max-width:100%;height:auto}', // 图片最大宽度
		// eslint-disable-next-line camelcase
		images_upload_handler: (blobInfo: any) => {
			return new Promise((resolve, reject) => {
				const bolb = blobInfo.blob();
				if (bolb.size > 2 * 1024 * 1024) {
					// 大于2M
					reject(new Error('图片大于2M,请重新上传'));
				} else {
					resolve(`data:${bolb.type};base64,${blobInfo.base64()}`);
				}
			});
		},
		setup: (editor: any) => {
			editor.on('blur', function () {
				emit('update:modelValue', editor.getContent());
			});
		}
	}
});
watch(
	() => props.modelValue,
	(newVal) => {
		data.content = newVal;
	}
);
</script>
<style lang="scss" scoped>
.components_Tinymce {
	width: 100%;
	height: 100%;
	overflow: hidden;
}
.tox.tox-silver-sink.tox-tinymce-aux {
	z-index: 9999 !important;
}
</style>
